<template>
  <div class="nav">
    <div class="info">
      <img class="avatar" src="../assets/image/LoginImg.jpg">
      <span class="admin-label">系统管理员</span>
      <i class="el-icon-close logout-icon" @click="logout">注销</i>
    </div>
    <div class="menu">
      <el-menu
        router
        active-text-color="#545c64"
        :default-active="defaultActive"
        class="el-menu-vertical-demo"
        :active-class="activeClass"
      >
        <el-menu-item
          v-for="item in menuCart"
          :key="item.index"
          :index="item.index"
        >
          <i :class="item.icon"></i>
          <span slot="title">{{ item.title }}</span>
        </el-menu-item>
      </el-menu>
    </div>
  </div>
</template>

<script>
export default {
  name: "PageCart",
  data() {
    return {
      menuCart: [
        {
          index: "/subSystems",
          title: "子系统管理",
          icon: "el-icon-paperclip",
        },
        {
          index: "/userManage",
          title: "用户管理",
          icon: "el-icon-user",
        },
        {
          index: "/roleManage",
          title: "角色管理",
          icon: "el-icon-coordinate",
        },
        {
          index: "/resourceManage",
          title: "资源管理",
          icon: "el-icon-setting",
        },
      ],
      activeClass: "is-active", // 默认的高亮类名
    };
  },
  computed: {
    defaultActive() {
      return this.$route.path;
    },
  },
  methods: {
    logout() {
      // 执行注销操作
    },
  },
};
</script>

<style>
.nav {
  top: 140px;
  height: 100%;
  position: fixed;
  border-right: solid 1px #e6e6e6;
}
.nav .info {
  position: absolute;
  left: 5px;
  top: -100px;
}
.avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
}
.admin-label {
  width: 70px;
  position: absolute;
  top: 10px;
  left: 80px;
  font-size: 12px;
}
.logout-icon {
  width: 70px;
  position: absolute;
  bottom: 5px;
  left: 100px;
  cursor: pointer;
  font-size: 10px;
}
.nav .el-menu {
  border: 0px;
}
.nav .el-col-2 {
  width: 180px;
}
.el-menu-vertical-demo .is-active {
  background-color: #80b8f0 !important;
  color: white !important;
}
</style>
